<template>
	<view class="contener ">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#1abc9c;" color="#1abc9c;"
			loadingText="加载中......" fontSize="30rpx"></u-loading-page>
		<view class="headBeiJing"></view>
		<!-- <skeleton :skeleton="skeleton" :loading="loading"> -->
		<block>
			<u-sticky>
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<view style="display: flex;padding: 0rpx 40rpx;background-color: #4ccb1d;">
					<view style="z-index: 999;display: flex;">
						<u--text text="我的农场" size="20" bold="true" color="#fdff82"></u--text>
						<view style="line-height: 72rpx;height: 30rpx;margin-left: 10rpx;">
							<u--text text="新鲜现摘现种果蔬|" size="10" color="#fff"></u--text>
						</view>
					</view>
					<view class="left " @tap="nearAddress">
						<view style="height: 2px;display: flex;line-height: 23rpx;">
							<image :src="imgapi+'/files/vegetable_mall_file/default/static/weizhi.png'" lazy-load
								mode="aspectFill"></image>
							<view style="color: #FFFFFF;">{{getCity()}}</view>
						</view>
					</view>
				</view>

				<view class="header">
					<!-- <navigator :url="`./searchPage?type=${1}`" hover-class="navigator-hover" class="ipt">
						<uni-search-bar style="margin-left: -50rpx;width: 460rpx;" :width="460" cancelButton="none"
							placeholder="小小田野欢迎您~" readonly="true">
							<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
						</uni-search-bar>
					</navigator> -->
					<view style="z-index: 999;width: 80%;margin: 10rpx;" @click="goSearch">
						<u-search :show-action="false" borderColor="rgb(230, 230, 230)" bgColor="#fff">
						</u-search>
					</view>

					<view @click="goMsg('../../pageA/HM-chat/merchantChat')" class="goMsg" style="margin-left: -20rpx;">
						<uni-badge class="uni-badge-left-margin" :text="msgNum" absolute="rightTop" size="small">
							<uni-icons type="chat-filled" size="20" color="#ffffff"></uni-icons>
						</uni-badge>
						<view style="text-align: center;font-size: 20rpx;color: #fff;">
							<text>聊天</text>
						</view>
					</view>
					<view style="margin-right: -5px;">
						<view class="shareIcon">
							<uni-icons type="redo-filled" size="20" color="#ffffff"></uni-icons>
							<text>分享</text>
						</view>
						<view>
							<button type="default" open-type="share" class="btn">
							</button>
						</view>
					</view>
				</view>
			</u-sticky>


			<view class="banner ">
				<uni-swiper-dot :info="bannerList" :current="currentBanner" class="swiperBig" field="title"
					:mode="mode">
					<swiper class="swiper" :autoplay="autoplay" @change="bannerChange" circular>
						<swiper-item v-for="(item ,index) in bannerList" :key="item.id" @click="linkOthers(item.url)">
							<navigator :url="item.url">
								<view class="swiper-item">
									<image lazy-load v-if="imgapi+item.path" :src="imgapi+item.path" class="swiperimg"
										mode="aspectFill">
									</image>
								</view>
							</navigator>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

			</view>

			<!-- <button @click="linkOthers()">12312332</button> -->


			<view class="listBox ">
				<view class="listBoxchirden">
					<view class="selectBar">
						<u-subsection :list="items" mode="button" :current="current" @change="onClickItem"
							activeColor="#33c36c;" inactiveColor="#fff"></u-subsection>
					</view>
					<view class="content">
						<view v-show="current === 2">
							<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
								:key="index">
								<view class="">
									<image class="contentChirdenImg " :src="imgapi+item.avatar" mode="aspectFill"
										lazy-load>
									</image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="font-weight: bold;">{{item.plotName}}</view>
									<view style="margin: 0 0 8rpx ;color: #333;font-size: 26rpx;" v-if="hasJuli">
										{{item.juli}}km
									</view>
									<view style="margin: 8rpx 0;color: red;font-size: 20rpx;" v-else>
										未获取到用户位置信息，无法获取距离
									</view>
									<view v-if="item.label" style="margin-bottom: 8rpx;">
										<uni-tag :text="val" :type="getType(i)" size="mini"
											v-for="(val,i) in JSON.parse(removeLine(item.label))" :key='val.id'
											style="margin-right: 10px;font-size: 3px;"></uni-tag>
									</view>
									<view>
										<u--text :text="item.address" size="26rpx" color="#333" :lines="1"></u--text>
									</view>
								</view>

							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>

						<view v-show="current === 0">
							<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
								:key="index">
								<view>
									<image class=" contentChirdenImg" :src="imgapi+item.avatar" mode="aspectFill"
										lazy-load>
									</image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="font-weight: bold;">{{item.plotName}}</view>
									<view style="margin: 0 0 8rpx ;color: #333;font-size: 26rpx;" v-if="hasJuli">
										{{item.juli}}km
									</view>
									<view style="margin: 8rpx 0;color: red;font-size: 20rpx;" v-else>
										未获取到用户位置信息，无法获取距离
									</view>
									<view v-if="item.label" style="margin-bottom: 8rpx;">
										<uni-tag :text="val" :type="getType(i)" size="mini"
											v-for="(val,i) in JSON.parse(removeLine(item.label))" :key='val.id'
											style="margin-right: 10px;font-size: 3px;"></uni-tag>
									</view>
									<view>
										<u--text :text="item.address" size="26rpx" color="#333" :lines="1"></u--text>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>

						<view v-show="current === 1">
							<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
								:key="index">
								<view>
									<image class="contentChirdenImg" :src="imgapi+item.avatar" mode="aspectFill"
										lazy-load></image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="font-weight: bold;">{{item.plotName}}</view>
									<view style="margin: 0 0 8rpx ;color: #333;font-size: 26rpx;" v-if="hasJuli">
										{{item.juli}}km
									</view>
									<view style="margin: 8rpx 0;color: red;font-size: 20rpx;" v-else>
										未获取到用户位置信息，无法获取距离
									</view>
									<view v-if="item.label" style="margin-bottom: 8rpx;">
										<uni-tag :text="val" :type="getType(i)" size="mini"
											v-for="(val,i) in JSON.parse(removeLine(item.label))" :key='val.id'
											style="margin-right: 10px;font-size: 3px;"></uni-tag>
									</view>
									<view>
										<u--text :text="item.address" size="26rpx" color="#333" :lines="1"></u--text>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>
					</view>
				</view>
			</view>

			<Drag @dragClick="dragClick" background="transparent" creatTop='100'
				image="https://www.tdtye.com/files/vegetable_mall_file/default/niu.png" imageWidth="84%"
				text="这里可以查看附近的农场,如果不知道怎么使用请点这段文字~" :show="show"
				imageDong="https://www.tdtye.com/files/vegetable_mall_file/default/niu.png" ref="darg"></Drag>
		</block>

		<!-- </skeleton> -->

		<!-- <skeleton :skeleton="skeleton" :loading="loading">
		        <view>好的，页面加载完了</view>
		</skeleton> -->

	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import Drag from '@/components/beyondGod-drag/beyoundGod-drag.vue'
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		components: {
			Skeleton,
			Drag,
		},

		data() {
			return {
				keyword: "",
				loadingShow: true,
				msgNum: 0,
				bannerList: [{
					src: '/static/banner.jpg',
					content: "图片说明"
				}, {
					src: '/static/banner.jpg',
					content: "图片说明"
				}], //轮播图数据
				imageList: [{
					src: '/static/cart.png',
					content: "图片说明"
				}, {
					src: '/static/cart2.png',
					content: "图片说明"
				}],
				autoplay: true,
				interval: 2000,
				indicatorDots: true,
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				currentBanner: 0,
				mode: '',
				loading: true,
				skeleton: [
					'circle-sm+circle-sm+line-lg',
					'card-lg',
					'line-lg',
					40,
					'square+line-sm*3',
					'square+line-sm*3',
				], //骨架屏

				hasJuli: false,
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: '更多商家入驻中~'
				},
				params: {
					pageNo: 1,
					pageSize: 5,
					url: "",
				},
				city: '定位',
				latitude: null,
				longitude: null,
				isopendingwei: null, //是否开启定位
				current: 0,
				items: ["全部", "采摘", "种植"],
				pageSize: 5,
				pageNo: 1,
				imgapi: '',
				type: 2,
				data: [], //列表数据
				token: '',
				show: true, // 对话框弹出
			}
		},
		onPullDownRefresh() {
			this.latitude = uni.getStorageSync("dingwei").latitude
			this.longitude = uni.getStorageSync("dingwei").longitude
			this.cleanList()
			this.getlist()
		},
		onShow() {},
		watch: {
			latitude(newName, oldName) {
				if (newName) {
					this.hasJuli = true
					this.getDistrict()
				}
			}
		},
		onLoad(e) {
			console.log("e: ", e);
			if (this.$comm.checkNull(e.mpOpenid)) {
				uni.showToast({
					title: "openId:" + e.mpOpenid,
					icon: "none"
				})
			}
			console.log("onload事件");
			this.loadingShow = true
			this.share.imageUrl = ''
			if (!this.$comm.checkNull(this.latitude, this.longitude)) {
				console.log("无法获取经纬度");
				this.checkOpenGps()
			}
			this.params.url = "user/public/plot/list"
			let that = this
			// 判断位置是否授权
			if (uni.getStorageSync("dingwei")) {
				this.hasJuli = true
			}
			this.getBanner()
			this.cleanList()
			this.getlist()
			this.loadingShow = false
			setTimeout(() => {
				this.$refs.darg.touchstart()
			}, 3000)
		},


		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				this.getlist()
			}
		},
		methods: {
			getCity() {
				let city = uni.getStorageSync("city")
				if (!this.$comm.checkNull(city)) {
					return "定位";
				} else {
					return city;
				}
			},
			goSearch() {
				uni.navigateTo({
					url: "/pageA/search/search"
				})
			},

			// 获取区级
			getDistrict() {
				this.$axios({
					url: "user/public/getArea",
					method: "post",
					data: {
						lng: this.longitude,
						lat: this.latitude
					}
				}).then((res) => {
					this.city = res.result.name
					uni.setStorageSync("city", this.city)
				})
			},

			// 判断是否开启gps
			checkOpenGps() {
				var that = this;
				wx.getSystemInfo({
					success(res) {
						that.isopendingwei = res.locationEnabled;
						if (that.isopendingwei == false) {
							uni.showToast({
								title: '请先开启手机GPS定位,然后重新刷新',
								icon: "none",
								duration: 3000,
							})
							return
						}
						that.getLocation()
					}
				})
			},

			// 获取定位
			getLocation() {
				console.log("获取经纬度");
				let that = this
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									wx.getSystemInfo({
										success(res) {
											that.isopendingwei = res.locationEnabled;
											if (that.isopendingwei == false) {
												uni.showToast({
													title: '请先开启手机GPS定位,然后重新刷新',
													icon: "none",
													duration: 3000,
												})
												return
											}
										}
									})
									if (!that.isopendingwei) {
										uni.showToast({
											title: '请先开启手机GPS定位,然后重新刷新',
											icon: "none",
											duration: 3000,
										})
										return
									}
									uni.getLocation({
										type: 'wgs84',
										geocode: true,
										success: function(res) {
											that.latitude = res.latitude
											that.longitude = res.longitude
											uni.setStorage({
												key: 'dingwei',
												data: {
													longitude: res.longitude,
													latitude: res.latitude,
												},
											});
											console.log("that.latitude: ", that.latitude);
											that.cleanList()
											that.getlist()
										}
									});
								},
								fail() { //1.2 拒绝授权
									console.log("您拒绝将不能享受附近的土地服务")
									uni.navigateTo({
										url: './location'
									})
								}
							})
						} else {

						}
					},

				});
			},
			clickIpt() {
				console.log("点击搜索");
			},
			// 去除"\"
			removeLine(str) {
				return str.replace(/\\/g, "")
			},
			// 标签颜色
			getType(index) {
				switch (index) {
					case 0:
						return "success"
					case 1:
						return "default"
					case 2:
						return "warning"
					case 3:
						return "error"
				}
			},
			// 未读消息
			getMsgNum() {
				this.$axios({
					url: "user/info/unRead",
					method: "post",
					data: {}
				}).then((res) => {
					// this.msgNum = res.result
				})
			},
			goMsg(url) {
				uni.navigateTo({
					url
				})
			},
			// 悬浮按钮点击
			dragClick() {
				this.show = false
				uni.navigateTo({
					url: "../../pageA/growVegetables/guideList"
				})
			},
			// 轮播图改变
			bannerChange(e) {
				this.currentBanner = e.detail.current;
			},
			// 跳转其他页面
			linkOthers(url) {
				if (!url) {
					return
				}
				console.log('url', url);
				// 此处填写你要跳转的绑定公众号文章的链接地址或者已经在小程序后台配置好业务域名的地址
				// var url = "https://www.baidu.com";	
				if (url == 'bindMp') {
					uni.redirectTo({
						// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
						url: "/pageA/gzGzh/goGzh"
					});
				}
			},

			//获取轮播图
			getBanner() {
				this.$axios({
					url: "user/public/bannerList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: 0,
					}
				}).then((res) => {
					this.bannerList = res.result.list
				})
			},
			//获取列表
			getlist() {
				if (this.params.pageNo == 1) {
					this.loadingShow = true
					this.status = "more"
				}
				this.$nextTick(function() {
					const that = this;
					this.imgapi = this.$reqConfig.URLIMAGE
					let dingwei = uni.getStorageSync("dingwei")
					this.$axios({
						url: this.params.url,
						method: "post",
						data: {
							lng: dingwei.longitude,
							lat: dingwei.latitude,
							pageNo: this.params.pageNo,
							pageSize: this.params.pageSize,
							type: this.type,
						}
					}).then((res) => {
						//请求接口成功之后，判断加载状态，处理数据						
						if (res.result.pages >= this.params.pageNo) {
							if (this.ifBottomRefresh) {
								this.data = this.data.concat(res.result.list)
							} else {
								this.data = res.result.list
							}

						} else {
							this.status = 'noMore'
						}
						if (this.params.pageNo >= res.result.pages) {
							this.status = 'noMore'
						}
						this.params.pageNo++;

						// 骨架屏取消
						this.loading = false;
						uni.hideLoading()
						this.loadingShow = false
						uni.stopPullDownRefresh()
					})
				})
			},
			//跳转详情
			tzdetails(e) {
				uni.navigateTo({
					url: `/pageA/growVegetables/vegetablesList?id=${e.id}&type=0&lat=${this.latitude}&lng=${this.longitude}`
				})
			},
			//定位
			nearAddress() {
				let _this = this
				wx.chooseLocation({
					success: (res) => {
						console.log("res: ", res);
						let city = res.address
						let that = _this
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.setStorage({
							key: 'dingwei',
							data: {
								longitude: res.longitude,
								latitude: res.latitude
							},
						});
						this.hasJuli = true;
						this.cleanList()
						this.getlist()
					},
					fail: (res) => {
						wx.showToast({
							title: '授权失败',
							icon: 'none',
							duration: 1000,
							success() {
								if (res.errMsg == "chooseLocation:fail auth deny") {
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {}
												})
											} else {
												return false;
											}
										}
									})
								}
							}
						})
					},
				})
			},

			cleanList() {
				this.data = [];
				this.params = {
					pageNo: 1,
					pageSize: 5
				}
				const token = wx.getStorageSync('token')
				this.params.url = "user/public/plot/list"
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			//选项卡
			onClickItem(option) {
				this.current = option;
				this.type = this.current == 0 ? 2 : this.current == 1 ? 1 : 0
				this.cleanList();
				this.getlist()
			},
		}
	}
</script>

<style scoped>
	button::after {
		border: initial;
	}

	.shareIcon {
		position: absolute;
		width: 40rpx;
		font-size: 20rpx;
		text-align: center;
		color: #fff;
		margin-top: 2rpx;
	}

	.btn {
		height: 80rpx;
		color: #ffffff;
		background: transparent;
		border: none;
		outline: none;
		box-shadow: 0 0 black;
		border-radius: 100rpx;
		box-sizing: content-box;
		/* width: 104%; */
		font-size: 20rpx;
	}

	.status_bar {
		height: 100rpx;
		width: 100%;
		background-color: #4ccb1d;
	}

	.goMsg {
		line-height: 35rpx;
	}

	.ipt {
		width: 70%;
		line-height: 5rpx;
	}

	/deep/.uni-tag--success {
		background: linear-gradient(131deg, #00b09b, #96c93d);
	}

	/deep/.uni-tag--default {
		background: linear-gradient(252deg, #d7b9f5, #948ce6);
	}

	/deep/.uni-tag--warning {
		background: linear-gradient(131deg, #3c8ce7, #00eaff);

	}

	/deep/.uni-tag--error {
		background: linear-gradient(135deg, #fd6e6a, #ffc600);
	}

	/deep/.uni-tag--mini {
		font-size: 19rpx !important;
		display: inline-block;
		padding: 8rpx 18rpx !important;
		border: none !important;
	}

	/deep/.uni-searchbar {
		width: 100%;
	}

	.swiperBig {
		border-radius: 28rpx;
		overflow: hidden;
		display: inline-block;
	}

	.swiper {
		width: 750rpx;
		border-radius: 28rpx;
		overflow: hidden;
	}

	.swiperimg {
		width: 750rpx;
		height: 750rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 25rpx 0 20rpx;
		align-items: center;
		background-color: #4ccb1d;
	}

	.left {
		margin-left: 5rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		z-index: 800;
	}

	.left image {
		width: 20rpx;
		height: 25rpx;
		margin-right: 6upx;
	}

	.banner {
		width: 750rpx;
		height: 245rpx;
		/* background-color: #FFf; */

	}

	.banner image {
		height: 350rpx;
		width: 100%;
	}

	.listBox {
		width: 750rpx;
		height: calc(100vh - 450rpx);
	}

	.listBoxchirden {
		/* width: 700rpx; */
		margin: 35rpx auto;
	}

	.listBox .v-tabs {
		color: #3CC51F;
		activeColor: #3CC51F;
	}

	.content {
		width: 750rpx;
	}

	.contentChirden {
		width: 700rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 15rpx;
	}

	.contentChirdenImg {
		width: 150rpx;
		height: 150rpx;
		border: 2rpx solid #EEEEEE;
	}

	.segmented-control__item--button.data-v-a00bd3e0 {
		height: 60rpx;
	}

	.uni-searchbar {
		width: 460rpx;
	}

	/deep/.data-v-729c0bb4 .uni-searchbar {
		width: 450rpx;
	}

	/deep/.uni-searchbar.data-v-64ee3838 {
		background-color: #4ccb1d;
	}

	/deep/.uni-searchbar__text-placeholder.data-v-64ee3838 {
		font-size: 28rpx;
		color: #3eab78;
		/* margin-left: -13px; */
	}

	/deep/.u-subsection--button__bar.data-v-78c1286e {
		/* background-color: #395dff; */
		border-radius: 3px !important;
	}

	/deep/.u-subsection--button.data-v-78c1286e {
		background: linear-gradient(7deg, #6ed1ef, #3cd500);
	}

	/deep/.u-subsection__item__text.data-v-78c1286e {
		font-weight: 900;
	}

	.headBeiJing {
		position: absolute;
		height: 350rpx;
		z-index: -1;
		width: 100%;
		border-radius: 0rpx 0rpx 60rpx 60rpx;
		background-color: #4ccb1d;

	}


	.selectBar {
		padding: 20rpx;
		/* position: absolute; */
		/* margin-bottom: 30rpx; */
	}

	image {
		will-change: transform
	}
</style>
